<template>
  <div class="app-container">
    <!-- 搜索区域-->
    <el-row>
      <el-form ref="form" :model="queryParams" label-width="80px">
        <el-col :span="6">
          <el-form-item label="主体名称">
            <el-input v-model="queryParams.companyName" size="small"
                      placeholder="请输入主体名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="注册手机">
            <el-input v-model="queryParams.mobilePhone" size="small"
                      placeholder="请输入注册手机号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否会员">
            <el-select v-model="queryParams.memberFlag" size="small"
                       placeholder="请选择是否会员" style="width: 240px">
              <el-option label="非会员" :value="0"></el-option>
              <el-option label="会员" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="toggleContent">
          <el-col :span="6">
            <el-form-item label="用户状态">
              <el-select v-model="queryParams.userStatus" size="small" placeholder="请选择用户状态" style="width: 240px">
                <el-option label="正常" :value="0"></el-option>
                <el-option label="冻结" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="6">
          <el-form-item label-width="0" style="margin-left: 20px">
            <el-button type="primary" icon="el-icon-search" size="small" style="margin-right: 10px" @click="getPage">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            <a style="margin-left: 10px;color: #3a8ee6" @click="toggleContentHandle">
              {{toggleContent ? '收起' : '展开'}}
              <i v-if="toggleContent" class="el-icon-arrow-up"></i>
              <i v-else class="el-icon-arrow-down"></i>
            </a>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <!-- 操作按钮区域-->
    <el-row>
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-download" size="medium" style="margin-right: 10px" @click="handleExport">导出</el-button>
        <el-button type="danger" icon="el-icon-delete" size="medium">批量删除</el-button>
      </el-col>
    </el-row>

    <!-- 表格区域-->
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="companyName" label="主体名称" width="280" align="center"></el-table-column>
          <el-table-column prop="mobilePhone" label="注册手机号" width="180" align="center"></el-table-column>
          <el-table-column prop="registerTime" label="注册时间" align="center"></el-table-column>
          <el-table-column label="是否会员" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.memberFlag == 0">非会员</el-tag>
              <el-tag type="success" v-else-if="scope.row.memberFlag == 1">会员</el-tag>
              <el-tag type="info" v-else>错误</el-tag>

              <image-preview
                src="http://t2zaocgs5.hn-bkt.clouddn.com/one.jpg,http://t2zaocgs5.hn-bkt.clouddn.com/two.jpg"
                width="50" height="80" />
            </template>
          </el-table-column>
          <el-table-column label="用户状态" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.userStatus == 0">正常</el-tag>
              <el-tag type="success" v-else-if="scope.row.userStatus == 1">冻结</el-tag>
              <el-tag type="info" v-else>错误</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
              <el-button type="text" size="small" style="color:red" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 编辑弹窗-->
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
      <el-form ref="updateForm" :model="editObjects" label-width="100px">
        <el-form-item label="主体名称">
          <el-input v-model="editObjects.companyName" placeholder="请输入主体名称"></el-input>
        </el-form-item>
        <el-form-item label="注册手机号">
          <el-input v-model="editObjects.mobilePhone" placeholder="请输入注册手机号"></el-input>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input v-model="editObjects.registerTime" placeholder="请输入注册时间"></el-input>
        </el-form-item>
        <el-form-item label="是否会员">
          <el-select v-model="editObjects.memberFlag" placeholder="请选择是否会员">
            <el-option label="非会员" :value="0"></el-option>
            <el-option label="会员" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="editObjects.userStatus" placeholder="请选择用户状态">
            <el-option label="正常" :value="0"></el-option>
            <el-option label="冻结" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页区域-->
    <el-row>
      <el-col :span="24" style="margin-top: 20px" align="center">
        <el-pagination layout="prev, pager, next"
                       @current-change="getPageByPageNum"
                       :page-size="queryParams.pageSize"
                       :total="total"
                       :current-page="queryParams.pageNum"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listNjtUserRegister, updateNjtUserRegister, deleteNjtUserRegister } from "@/api/monitor/njt/user/register"

export default {
  name: "UserRegister",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        companyName: "",
        mobilePhone: "",
        memberFlag: undefined,
        userStatus: undefined
      },
      toggleContent: false,
      tableData: [],
      total: 0,
      dialogVisible: false,
      editObjects: {
        id: undefined,
        companyName: "",
        mobilePhone: "",
        registerTime: "",
        memberFlag: undefined,
        userStatus: undefined
      }
    }
  },

  created() {
    this.getPage()
  },

  methods: {
    /** 文件导出 */
    handleExport(){
      this.download('/nongjt/userRegister/export', {
        ...this.queryParams
      }, `user_${new Date().getTime()}.xlsx`)
    },
    /** 编辑弹窗确定 */
    // 编辑确定
    submitData() {
      updateNjtUserRegister(this.editObjects).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.getPage()
        this.dialogVisible = false
      })
    },

    // 删除
    handleDelete(row) {
      this.$confirm("确认要删除该用户吗？", "提示", {
        type: "warning"
      }).then(() => {
        deleteNjtUserRegister(row.id).then(response => {
          this.$modal.msgSuccess(response.msg)
          this.getPage()
        })
      }).catch(() => {})
    },

    realSrcList() {
      if (!this.src) {
        return
      }
      let real_src_list = this.src.split(",")
      let srcList = []
      real_src_list.forEach(item => {
        if (isExternal(item)) {
          return srcList.push(item)
        }
        return srcList.push(process.env.VUE_APP_BASE_API + item)
      })
      return srcList
    },

    getPageByPageNum(num) {
      this.queryParams.pageNum = num
      this.getPage()
    },

    // 分页查询
    getPage() {
      listNjtUserRegister(this.queryParams).then(response => {
        this.tableData = response.rows
        this.total = response.total
      })
    },

    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        companyName: "",
        mobilePhone: "",
        memberFlag: undefined,
        userStatus: undefined
      }
      this.getPage()
    },

    toggleContentHandle() {
      this.toggleContent = !this.toggleContent
    },

    openDialog(objData) {
      Object.assign(this.editObjects, objData)
      this.dialogVisible = true
    }
  }
}
</script>
